<template>
<div>
  <navs></navs>
  <div class="box">
    <div class="bx2" v-show="lis.length !== 0">
      <div class="header">
        <div class="header_top">
          <div class="gwd">
            购物袋
            <span class="header_top_sp" style="color: #616265"
              >{{ lis.length }}项</span
            >
          </div>
          <div class="bjt">
            <a href=""><h3>注册会员立享150元优惠券></h3></a>
          </div>
        </div>
        <!-- 购物车 -->
        <div class="header_content">
          <!-- 全选 -->
          <div class="cart_select">
            <input type="checkbox" v-model="checkAll" @click="checkA" />全选
          </div>
          <!-- 添加项 -->
          <div class="cart_add" v-for="(item, index) in lis" :key="index">
            <div class="cart_left">
              <!-- 单选 -->
              <input type="checkbox" v-model="item.check" @click="dan(index)" />
            </div>
            <div class="cart_right">
              <a href="" class="right_a"><img :src="item.imgs" alt="" /></a>
              <div class="right_format">
                <div class="right_format_select">{{ item.xi }}</div>
                <div class="right_format_select2">{{ item.code }}</div>
                <div class="right_format_select3">
                  <div class="right_format_select3_d">
                    <div>
                      颜色：
                      <select name="" id="">
                        <option value="">白色</option>
                        <option value="">黑色</option>
                      </select>
                    </div>
                    <div>
                      &nbsp;&nbsp;尺寸：
                      <select name="" >
                        <option value="">40</option>
                        <option value="">41</option>
                        <option value="">42</option>
                        <option value="">43</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 加加减减 -->
              <div class="jjjj">
                <div class="num">数量</div>
                <div class="plus">
                  <button
                    type="button"
                    class="pluss"
                    style="margin-right: 4px"
                    @click="dux(index)"
                  >
                    -
                  </button>
                  {{ item.num }}
                  <button
                    type="button"
                    class="pluss"
                    style="margin-left: 4px"
                    @click="add(index)"
                  >
                    +
                  </button>
                </div>
              </div>
              <!-- 单价 -->
              <div class="price">
                <div class="dan">单价</div>
                <p class="price_p">￥{{ item.price2 }}</p>
              </div>
              <!-- 小计 -->
              <div class="xj">
                <div class="xj_d">小计</div>
                <div class="xj_d2">￥{{ item.num * item.price2 }}</div>
              </div>
              <div class="right_format_select4" @click="del(index)">删除</div>
            </div>
          </div>
          <!-- 结算 -->
          <div class="header_bottom">
            <h3>
              订单摘要<span>{{ lis.length }}项</span>
            </h3>
            <div class="total">
              <div>订单总价格：￥{{ total }}</div>
              <button class="settlement">结算</button>
            </div>
          </div>
          <!-- 继续购物 -->
          <div class="jx">
            实付金额满150包邮。购买鞋款/包袋赠AIBU定制棉布购物袋1个。
            <router-link to="/index">继续购物</router-link>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <!-- <div class="footer"></div> -->
    </div>
    <!-- 没有商品就显示 -->
    <div class="hide" v-show="lis.length === 0">
      <h3>您的购物车是空的</h3>
      <button>
          <router-link to="/index">继续购物</router-link>
      </button>
    </div>
    <div class="tui">
      <h1>为你推荐</h1>
      <div class="jia">
        <a href="" v-for="(item, index) in li" :key="index">
          <div class="pic">
            <img :src="item.imgg" alt="" />
          </div>
          <div class="xiu">
            {{ item.loo }}<br />
            {{ item.xiu }}
          </div>
        </a>
      </div>
    </div>
  </div>
  <footers></footers>
</div>
</template>
<script setup>
// 引入组件
import navs from "../components/Nav.vue";
import footers from "../components/Footer.vue";
import { ref, reactive, computed, watch, toRef, toRefs, toRaw } from "vue";
// 底部遍历
const li = reactive([
  {
    imgg: "/public/images/list-search-cart/xie.jpg",
    loo: "AIBU街头720系列男士",
    xiu: "休闲鞋",
  },
  {
    imgg: "/public/images/list-search-cart/xie.jpg",
    loo: "AIBU街头720系列男士",
    xiu: "休闲鞋",
  },
  {
    imgg: "/public/images/list-search-cart/xie.jpg",
    loo: "AIBU街头720系列男士",
    xiu: "休闲鞋",
  },
  {
    imgg: "/public/images/list-search-cart/xie.jpg",
    loo: "AIBU街头720系列男士",
    xiu: "休闲鞋",
  },
]);
// 购物车遍历
const lis = reactive([
  {
    imgs: "/public/images/list-search-cart/xie.jpg",
    xi: "AIBU男子高尔夫S3系列",
    code: "10290460212",
    price2: 1989.0,
    num: 1,
    check: false,
  },
  {
    imgs: "/public/images/list-search-cart/xie2.jpg",
    xi: "AIBU男子高尔夫S4系列",
    code: "10290460213",
    price2: 2000.0,
    num: 1,
    check: false,
  },
]);

//删除
function del(index) {
  if(confirm("是否删除商品？")){
    lis.splice(index, 1);
  }
}
//数量相加
function add(index) {
  lis[index].num++;
}
function dux(index) {
  if (lis[index].num == 1) {
    return;
  }
  lis[index].num--;
}

//全选
let checkAll = ref(false);
function checkA() {
  checkAll.value = !checkAll.value;
  lis.forEach((item) => {
    item.check = checkAll.value;
  });
}
// 单选
function dan(index) {
  lis[index].check = !lis[index].check;
  let da = lis.every((item) => {
    return item.check == true;
  });
  if (da == true) {
    checkAll.value = true;
  } else {
    checkAll.value = false;
  }
}
//总价
let total = computed(() => {
  let count = 0;
  for (let i = 0; i < lis.length; i++) {
    if (lis[i].check == true) {
      count += lis[i].price2 * lis[i].num;
    }
  }
  return count;
});
</script>

<style lang="less" scoped>

// 版心
.box {
  background: #f7f8fa;
  margin-top:4rem;
  padding: 2rem 0 6rem 0;
  .bx2 {
    width: 60%;
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
    box-shadow: 0px 5px 6px #ccc;
    // display: none;
    .header {
      width: 90%;
      margin: 20px auto;

      .header_top {
        font-size: 22px;
        font-weight: 700;
        .gwd {
          .header_top_sp {
            font-size: 14px;
            color: #ccc;
          }
        }
        .bjt {
          a {
            text-decoration: none;
            display: block;
            line-height: 206px;
            height: 220px;
            background-image: url(../../public/images/list-search-cart/gwc.jpg);
            background-repeat: no-repeat;
            margin-top: 12px;
            background-size: 100%;
            h3 {
              margin-left: 140px;
              color: white;
            }
          }
        }
      }
      // 购物车
      .header_content {
        .cart_select {
          border-bottom: 1px solid #ccc;
          padding-bottom: 20px;
        }
        .cart_add {
          display: flex;
          border-bottom: 1px solid #ccc;
          padding-bottom: 10px;
          .cart_left {
            line-height: 119px;
            padding-right: 30px;
          }
          .cart_right {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            .jjjj {
              text-align: center;
              .num {
                margin: -39px 0px 21px 0px;
              }
              .plus {
                .pluss {
                  padding: 4px 15px;
                  margin-right: 4px;
                  background-color: rgb(231, 230, 230);
                  border: 0;
                  border-radius: 6px;
                  cursor: pointer;
                }
              }
            }
            .price {
              text-align: center;
              .dan {
                margin: -39px 0px 21px 0px;
              }
              .price_p {
                font-size: 20px;
                color: #595959;
                font-weight: 600;
              }
            }
            .xj {
              .xj_d {
                margin: -40px 0px 21px 0px;
                text-align: center;
              }
              .xj_d2 {
                margin-top: 10px;
                font-weight: 600;
                font-size: 20px;
              }
            }
            .right_a {
              width: 100px;
              height: 100px;
              img {
                width: 100px;
                height: 100px;
              }
            }
            .right_format {
              .right_format_select {
                line-height: 22px;
                font-size: 16px;
                color: #000000;
                font-weight: 600;
              }
              .right_format_select2 {
                color: #616265;
                font-size: 14px;
                font-weight: 600;
                line-height: 18px;
              }
              .right_format_select3 {
                padding: 8px 0;
                width: 100%;
                display: flex;
                .right_format_select3_d {
                  display: flex;
                }
              }
            }
            .right_format_select4 {
              border: 2px solid black;
              border-radius: 8px;
              width: 60px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
            }
          }
        }
        .jx {
          margin: 20px 0;
          background: #e9e4e9;
          padding: 10px 28px;
          line-height: 20px;
          font-size: 14px;
          color: #616265;
          a {
            text-decoration: none;
            margin-left: 12px;
            color: #000000;
          }
        }
      }
      .header_bottom {
        background: #fff;
        padding: 30px;
        h3 {
          margin-bottom: 20px;
          span {
            color: #616265;
            font-size: 14px;
            margin-left: 12px;
          }
        }
        .total {
          padding-top: 30px;
          border-top: 1px solid #e3e3e3;
          display: flex;
          line-height: 44px;
          font-weight: 600;
          color: #000000;
          font-size: 16px;
          justify-content: space-between;
          div {
            font-weight: 600;
            color: #000000;
            font-size: 24px;
          }
        }
        .settlement {
          margin-top: 10px;
          width: 202px;
          height: 44px;
          line-height: 44px;
          color: #fff;
          background: black;
          cursor: pointer;
          font-size: 16px;
        }
      }
    }
  }
  .hide {
    width: 100%;
    padding-top: 62px;
    text-align: center;
    h3 {
      margin-bottom: 13px;
    }
    button {
      cursor: pointer;
      width: 202px;
      height: 44px;
      line-height: 44px;
      font-size: 16px;
      background: black;
      a{
        color: #fff;
      }
    }
  }
  .tui {
    text-align: center;

    h1 {
      margin-top: 62px;
    }
    .jia {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px auto 0;
      a {
        text-decoration: none;
        width: 200px;
        margin: 0px 10px 30px 10px;
        color: black;
        transition: 0.3s all ease-in-out;
        .pic {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 200px;
          img {
            width: 200px;
            height: 200px;
          }
        }
        .xiu {
          margin-top: 20px;
          margin-bottom: 20px;
        }
      }
      a:hover {
        box-shadow: 1px 1px 10px #616265;
      }
    }
  }
}
</style>
